<template>
    <!-- 添加按钮 -->
    <div class="tool" style="margin: 20px 0; ">
        <el-input v-model="subject_name" style="width: 240px" placeholder="名称"/>
        <el-button type="primary" style="margin-left: 20px;" @click="searchSubject">搜索</el-button>
        <el-button type="primary" style="margin-right: 20px;" @click="handleAdd">添加</el-button>


    </div>
    <el-dialog v-model="dialogSubjectVisible" :title="isEdit?'编辑':'添加'" width="900">
        <el-form :model="form">
            <el-form-item label="科目名称" :label-width="formLabelWidth">
                <el-input
                    v-model="form.name"
                    autocomplete="off"
                    style="width: 200px"
                />
            </el-form-item>
            <el-form-item label="考核单位" :label-width="formLabelWidth">
                <el-input
                    v-model="form.unit"
                    autocomplete="off"
                    style="width: 200px"
                />
            </el-form-item>
            <!-- <el-form-item label="成绩等级" :label-width="formLabelWidth">
                <el-row :gutter="10">
                    <div v-for="(grade, index) in form.grades" :key="index">
                        {{ grade.grade }}:

                        <el-col :span="6">
                            <el-input
                                v-model="grade.max"
                                label="最高分"
                                placeholder="最高分"
                                style="width: 80px; margin-bottom: 10px"
                            />
                            <el-input
                                label="最低分"
                                v-model="grade.min"
                                placeholder="最低分"
                                style="width: 80px"
                            />
                        </el-col>
                    </div>
                </el-row>
            </el-form-item> -->
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogSubjectVisible = false">
                    取消
                </el-button>
                <el-button type="primary" @click="onSubmit">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-table :data="subjects" style="width: 100%">
        <el-table-column prop="id" label="id" width="180"/>
        <el-table-column prop="name" label="科目名称"/>
        <el-table-column prop="unit" label="考核单位"/>
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">

                <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button link type="primary" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination-block" style="margin-top: 20px; display: flex; justify-content: flex-end;">
        <el-pagination background layout="prev, pager, next" :total="total"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       size="small"
                       :default-page-size="5"
        />
    </div>
</template>
<script lang='ts' setup>
import {onMounted, ref} from 'vue'
import {ElMessage} from "element-plus";
import axios from "axios";

const subject_name = ref('')
const dialogSubjectVisible = ref(false);
const currentPage = ref(1)
const total = ref(0)
const form = ref({
    name: "",
    unit: "",
})
const formLabelWidth = "140px";
const subjects = ref([])
const isEdit = ref(false);
onMounted(() => {
    getSubjects()
})
const handleCurrentChange = (number) => {
    currentPage.value = number
    getSubjects()
}
const getSubjects = () => {
    axios.get('/api/subjects?page=' + currentPage.value + '&name=' + subject_name.value).then(res => {
        subjects.value = res.data.data.data
        total.value = res.data.data.total
    })
}
const searchSubject = () => {
    getSubjects()
}
const handleAdd = () => {
    dialogSubjectVisible.value = true
    isEdit.value = false
}
const handleEdit = (row) => {
    dialogSubjectVisible.value = true
    isEdit.value = true

    axios.get('/api/subjects/'+row.id).then((response) => {
        form.value = response.data.data;
    });

}
const handleDelete = (row: any) => {
    ElMessageBox.confirm(
        '是否确认删除?',
        '提示',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(() => {
            axios.delete('/api/subjects/'+row.id).then((response) => {
                ElMessage({
                    message: '删除成功.',
                    type: 'success',
                })
                getStudents();
            })


        })
}
const onSubmit = () => {
    if (isEdit.value) {
        axios.put("/api/subjects/" + form.value.id, form.value).then((response) => {
            ElMessage({
                message: '修改成功.',
                type: 'success',
            })
            dialogSubjectVisible.value = false;
            getSubjects();
            form.value = {}
        });
    } else {
        axios.post("/api/subjects", form.value).then((response) => {
            ElMessage({
                message: '添加成功.',
                type: 'success',
            })
            dialogSubjectVisible.value = false;
            getSubjects();
            form.value = {}
        })
    }
}
</script>
<style>

</style>
